import { Button } from '../components/Button';
import { ImageWithLoading } from '../components/ImageWithLoading';
import { ArrowRight, ArrowDown, Star } from 'lucide-react';
import { usePageTitle, PAGE_TITLES } from '../lib/usePageTitle';

export function HomePage() {
  usePageTitle(PAGE_TITLES.HOME);

  return <div className="w-full bg-[#0a2540] text-white">
      {/* Hero Section */}
      <section className="relative w-full min-h-[90vh] flex items-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-[#0a2540] opacity-70 z-10"></div>
          <ImageWithLoading 
            src="https://images.unsplash.com/photo-1594737625785-a6cbdabd333c?ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" 
            alt="Person using a massage gun" 
            className="w-full h-full"
          />
        </div>
        <div className="container mx-auto px-4 md:px-8 relative z-10">
          <div className="max-w-3xl">
            <h1 className="text-5xl md:text-7xl font-extrabold leading-tight mb-6">
              DESIGN YOUR WELLNESS
            </h1>
            <p className="text-xl md:text-2xl mb-8 text-gray-200">
              Expert reviews and recommendations for the best health and
              wellness products on the market.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Button size="lg" href="/reviews">
                Explore Reviews <ArrowRight className="ml-2" size={20} />
              </Button>
              <Button size="lg" variant="secondary" href="/top-picks">
                View Top Picks <ArrowRight className="ml-2" size={20} />
              </Button>
            </div>
          </div>
        </div>
        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
          <button 
            onClick={() => {
              document.getElementById('process-section')?.scrollIntoView({ 
                behavior: 'smooth' 
              });
            }}
            className="text-white hover:text-[#06d6a0] transition-colors duration-300 cursor-pointer"
            aria-label="Scroll to next section"
          >
            <ArrowDown size={32} />
          </button>
        </div>
      </section>
      {/* Process Section */}
      <section id="process-section" className="py-20 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
            <div className="text-center">
              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#0a2540] mb-6">
                <span className="text-[#06d6a0] text-2xl font-bold">01</span>
              </div>
              <h3 className="text-2xl font-bold mb-4">Expert Testing</h3>
              <p className="text-gray-300">
                We rigorously test each product in real-world conditions to
                evaluate performance and durability.
              </p>
            </div>
            <div className="text-center">
              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#0a2540] mb-6">
                <span className="text-[#06d6a0] text-2xl font-bold">02</span>
              </div>
              <h3 className="text-2xl font-bold mb-4">Unbiased Reviews</h3>
              <p className="text-gray-300">
                Our team purchases products independently to ensure honest,
                uninfluenced opinions.
              </p>
            </div>
            <div className="text-center">
              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#0a2540] mb-6">
                <span className="text-[#06d6a0] text-2xl font-bold">03</span>
              </div>
              <h3 className="text-2xl font-bold mb-4">Smart Recommendations</h3>
              <p className="text-gray-300">
                We match you with products that truly meet your needs, goals,
                and budget.
              </p>
            </div>
          </div>
        </div>
      </section>
      {/* Featured Categories Section */}
      <section className="py-20 px-4 md:px-8">
        <div className="container mx-auto">
          <h2 className="text-4xl md:text-5xl font-bold mb-12 text-center">
            OPTIMIZE YOUR <span className="text-[#06d6a0]">HEALTH</span>
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <a href="/reviews?category=massage-guns" className="group">
              <div className="relative h-[300px] overflow-hidden rounded-lg">
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                  alt="Massage Gun" 
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" 
                />
                <div className="absolute inset-0 bg-gradient-to-t from-[#0a2540] to-transparent"></div>
                <div className="absolute bottom-0 left-0 p-6">
                  <h3 className="text-2xl font-bold mb-2">Massage Guns</h3>
                  <p className="text-gray-300 mb-4 line-clamp-1">
                    Recovery tools for sore muscles
                  </p>
                  <span className="text-[#06d6a0] font-medium flex items-center">
                    Explore <ArrowRight size={16} className="ml-2" />
                  </span>
                </div>
              </div>
            </a>
            <a href="/reviews?category=standing-desks" className="group">
              <div className="relative h-[300px] overflow-hidden rounded-lg">
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1586953208448-b95a79798f07?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                  alt="Standing Desk" 
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" 
                />
                <div className="absolute inset-0 bg-gradient-to-t from-[#0a2540] to-transparent"></div>
                <div className="absolute bottom-0 left-0 p-6">
                  <h3 className="text-2xl font-bold mb-2">Standing Desks</h3>
                  <p className="text-gray-300 mb-4 line-clamp-1">
                    Ergonomic workstations for productivity
                  </p>
                  <span className="text-[#06d6a0] font-medium flex items-center">
                    Explore <ArrowRight size={16} className="ml-2" />
                  </span>
                </div>
              </div>
            </a>
            <a href="/reviews?category=sleep-tech" className="group">
              <div className="relative h-[300px] overflow-hidden rounded-lg">
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1541781774459-bb2af2f05b55?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                  alt="Sleep Technology" 
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" 
                />
                <div className="absolute inset-0 bg-gradient-to-t from-[#0a2540] to-transparent"></div>
                <div className="absolute bottom-0 left-0 p-6">
                  <h3 className="text-2xl font-bold mb-2">Sleep Technology</h3>
                  <p className="text-gray-300 mb-4 line-clamp-1">
                    Devices for better sleep quality
                  </p>
                  <span className="text-[#06d6a0] font-medium flex items-center">
                    Explore <ArrowRight size={16} className="ml-2" />
                  </span>
                </div>
              </div>
            </a>
            <a href="/reviews?category=home-gym" className="group">
              <div className="relative h-[300px] overflow-hidden rounded-lg">
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                  alt="Home Gym Equipment" 
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" 
                />
                <div className="absolute inset-0 bg-gradient-to-t from-[#0a2540] to-transparent"></div>
                <div className="absolute bottom-0 left-0 p-6">
                  <h3 className="text-2xl font-bold mb-2">Home Gym</h3>
                  <p className="text-gray-300 mb-4 line-clamp-1">
                    Essential fitness equipment
                  </p>
                  <span className="text-[#06d6a0] font-medium flex items-center">
                    Explore <ArrowRight size={16} className="ml-2" />
                  </span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </section>
      {/* Latest Reviews Section */}
      <section className="py-20 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto">
          <div className="flex justify-between items-end mb-12">
            <h2 className="text-4xl md:text-5xl font-bold">LATEST REVIEWS</h2>
            <a href="/reviews" className="text-[#06d6a0] font-medium flex items-center">
              View All <ArrowRight size={16} className="ml-2" />
            </a>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <article className="bg-[#0a2540] rounded-lg overflow-hidden">
              <div className="relative">
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                  alt="TheraGun Pro" 
                  className="w-full h-48 object-cover" 
                />
                <span className="absolute top-4 left-4 bg-[#06d6a0] text-[#0a2540] text-sm font-bold px-3 py-1 rounded">
                  REVIEW
                </span>
              </div>
              <div className="p-6">
                <div className="flex items-center mb-3">
                  <div className="flex text-[#f8961e]">
                    <Star size={16} fill="#f8961e" />
                    <Star size={16} fill="#f8961e" />
                    <Star size={16} fill="#f8961e" />
                    <Star size={16} fill="#f8961e" />
                    <Star size={16} fill="#f8961e" />
                  </div>
                  <span className="ml-2 text-sm font-medium">5.0</span>
                </div>
                <h3 className="text-xl font-bold mb-3">
                  TheraGun Pro: The Ultimate Recovery Tool?
                </h3>
                <p className="text-gray-300 mb-4">
                  We tested the TheraGun Pro for 3 months to see if it lives up
                  to the hype. Here's our verdict.
                </p>
                <a href="/reviews/theragun-pro" className="text-[#06d6a0] font-medium flex items-center">
                  Read Review <ArrowRight size={16} className="ml-2" />
                </a>
              </div>
            </article>
            <article className="bg-[#0a2540] rounded-lg overflow-hidden">
              <div className="relative">
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1611269154421-4e27233ac5c7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                  alt="Jarvis Standing Desk" 
                  className="w-full h-48 object-cover" 
                />
                <span className="absolute top-4 left-4 bg-[#06d6a0] text-[#0a2540] text-sm font-bold px-3 py-1 rounded">
                  REVIEW
                </span>
              </div>
              <div className="p-6">
                <div className="flex items-center mb-3">
                  <div className="flex text-[#f8961e]">
                    <Star size={16} fill="#f8961e" />
                    <Star size={16} fill="#f8961e" />
                    <Star size={16} fill="#f8961e" />
                    <Star size={16} fill="#f8961e" />
                    <Star size={16} />
                  </div>
                  <span className="ml-2 text-sm font-medium">4.0</span>
                </div>
                <h3 className="text-xl font-bold mb-3">
                  Jarvis Standing Desk: Worth The Investment?
                </h3>
                <p className="text-gray-300 mb-4">
                  After 6 months of daily use, we break down the pros and cons
                  of this popular standing desk.
                </p>
                <a href="/reviews/jarvis-standing-desk" className="text-[#06d6a0] font-medium flex items-center">
                  Read Review <ArrowRight size={16} className="ml-2" />
                </a>
              </div>
            </article>
            <article className="bg-[#0a2540] rounded-lg overflow-hidden">
              <div className="relative">
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1541781774459-bb2af2f05b55?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                  alt="Oura Ring" 
                  className="w-full h-48 object-cover" 
                />
                <span className="absolute top-4 left-4 bg-[#06d6a0] text-[#0a2540] text-sm font-bold px-3 py-1 rounded">
                  REVIEW
                </span>
              </div>
              <div className="p-6">
                <div className="flex items-center mb-3">
                  <div className="flex text-[#f8961e]">
                    <Star size={16} fill="#f8961e" />
                    <Star size={16} fill="#f8961e" />
                    <Star size={16} fill="#f8961e" />
                    <Star size={16} fill="#f8961e" />
                    <Star size={16} fill="#f8961e" strokeWidth={1} />
                  </div>
                  <span className="ml-2 text-sm font-medium">4.5</span>
                </div>
                <h3 className="text-xl font-bold mb-3">
                  Oura Ring Gen 3: Sleep Tracking Perfected
                </h3>
                <p className="text-gray-300 mb-4">
                  Is this tiny ring the best sleep tracker on the market? Our
                  in-depth analysis after 90 nights.
                </p>
                <a href="/reviews/oura-ring-gen-3" className="text-[#06d6a0] font-medium flex items-center">
                  Read Review <ArrowRight size={16} className="ml-2" />
                </a>
              </div>
            </article>
          </div>
        </div>
      </section>
      {/* Trust Banner */}
      <section className="py-16 px-4 md:px-8">
        <div className="container mx-auto text-center">
          <p className="text-xl md:text-2xl font-bold mb-8">
            TRUSTED BY 50,000+ HEALTH OPTIMIZERS
          </p>
          <div className="flex flex-wrap justify-center gap-8 opacity-70">
            <ImageWithLoading 
              src="https://images.unsplash.com/photo-1611605698323-b1e99cfd37ea?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&h=60&q=80" 
              alt="Wired" 
              className="h-8 filter grayscale hover:grayscale-0 transition-all duration-300" 
            />
            <ImageWithLoading 
              src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&h=60&q=80" 
              alt="Men's Health" 
              className="h-8 filter grayscale hover:grayscale-0 transition-all duration-300" 
            />
            <ImageWithLoading 
              src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&h=60&q=80" 
              alt="Forbes" 
              className="h-8 filter grayscale hover:grayscale-0 transition-all duration-300" 
            />
            <ImageWithLoading 
              src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&h=60&q=80" 
              alt="Fast Company" 
              className="h-8 filter grayscale hover:grayscale-0 transition-all duration-300" 
            />
          </div>
        </div>
      </section>
    </div>;
}